<template>
	<view class="page-content padding-bottom-xl">
		<cu-custom dataHeight="86" :isBack="true" style="width: 100%;">
			<block slot="content">
				<text class="text-xl text-black">{{ name }}</text>
			</block>
		</cu-custom>
		<view class="head1">
			<image class="bg-set1" :style="'background-image:url(' + bgimage + ');background-size:contain;background-position:0 14px;background-repeat:no-repeat;'"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<navigator url="/pages/index/peizhuang/index?type=1">
				<view class="info-left">
					<image class="head-image" :src="icon_wuxing"></image>
				</view>
			</navigator>
			<view class="info-right padding-left-sm">
				<view class="title">
					{{ name }}
				</view>
				<view class="info-detail">
					{{ info }}
				</view>
			</view>
		</view>
		<view class="box" v-if="false">
			<uni-row class="box-row">
				<uni-col :xs="3">
					<view style="width: 30rpx;height: 20rpx;"></view>
				</uni-col>
				<uni-col :xs="4" v-for="(item,index) in types" style="display: flex;" class="box-box1" :key="index">
					<view class="types">
						<view class="dian" :style="item.color"></view>
						<text class="box-row-text" :style="item.textColor">{{item.text}}</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 装备展示区域 -->
		<view class="box-box">
			<uni-row class="box-row">
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol1[index].style" class="box-box-box flash-box" v-for="(item,index) in boxCol1" :key="index"
						@click="open(0,list[type][0][index],index)">
						<view :style="typeColors[list[type][0][index]].color" class="box-box-box-box" :class="{'flash': GetEquipIcon(0, index)}">
							<view :style="{backgroundImage: `url(${GetEquipIcon(0, index)})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', width: '100%', height: '100%', 'z-index': 3, position: 'relative'}"></view>
						</view>
					</view>
				</uni-col>
				<!-- 第二列 -->
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol2[index].style" @click="open(1,list[type][1][index],index)" class="box-box-box1 flash-box"
						v-for="(item,index) in boxCol2" :key="index">
						<view :style="typeColors[list[type][1][index]].color" class="box-box-box-box" :class="{'flash': GetEquipIcon(1, index)}" v-if="index!=3">
							<view :style="{backgroundImage: `url(${GetEquipIcon(1, index)})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', width: '100%', height: '100%', 'z-index': 3, position: 'relative'}"></view>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol3[index].style" @click="open(2,list[type][2][index],index)" class="box-box-box2 flash-box"
						v-for="(item,index) in boxCol3" :key="index">
						<view :style="typeColors[list[type][2][index]].color" class="box-box-box-box" :class="{'flash': GetEquipIcon(2, index)}">
							<view :style="{backgroundImage: `url(${GetEquipIcon(2, index)})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', width: '100%', height: '100%', 'z-index': 3, position: 'relative'}"></view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 装备属性数据展示弹出框 -->
		<uni-popup ref="popup" :mask-click="false" style="z-index: 100000000;">
			<view class="pop-view">
				<view class="pop_background">
					<view class="pop-title-close">
						<image class="close-btn" src="https://jianxia.mazhoudao.com/h5/static/home/peizhuang/×.png" @click="close"></image>
					</view>
					<view class="pop-chose">
						<view class="pop-chose-c">
							<view class="detailtitle">
								<text>{{detailtext.title}}</text>
							</view>
							<view class="wuxingtitle">
								<text>{{detailtext.wuxingtitle}}</text>
							</view>
							<view class="wuxingtext" :style="shuxingcolor">
								<text>{{detailtext.wuxing}}</text>
							</view>
							<view class="equiptype">
								<text>{{detailtext.equiptype}}</text>
							</view>
							<view class="sx1">
								<text>{{detailtext.sx1}}</text>
							</view>
							<view class="sx2">
								<text>{{detailtext.sx2}}</text>
							</view>
							<view class="sx3">
								<text>{{detailtext.sx3}}</text>
							</view>
							<view class="sx4">
								<text>{{detailtext.sx4}}</text>
							</view>
							<view class="menpai">
								<text>{{detailtext.menpai}}</text>
							</view>
							<view class="ansx1">
								<text>{{detailtext.ansx1}}</text>
							</view>
							<view class="ansx2">
								<text>{{detailtext.ansx2}}</text>
							</view>
							<view class="ansx3">
								<text>{{detailtext.ansx3}}</text>
							</view>
							<view class="ansx4">
								<text>{{detailtext.ansx4}}</text>
							</view>
							<view class="ansx5">
								<text>{{detailtext.ansx5}}</text>
							</view>
							<view class="ansx6">
								<text>{{detailtext.ansx6}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';
	
	// 引入封装的网络请求
	import { handleRequest } from '@/common/request.js'
	import groups from '@/utils/init/groups.js'
	
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				
				// 门派
				mainId: 0,
				
				// 门派分支
				branchId: 1,
				
				type: 1,
				icon_wuxing: "",
				choose_type: 0,
				selectTypeIndex: 0,
				src: "https://jianxia.mazhoudao.com/h5/static/home/peizhuang/select.png",
				bgimage: "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png",
				selectCol: 0,
				selectIndex: 0,
				selectType: 0,
				typewuxing:0,
				shuxingcolor:"color:#FFFFFF",
				style: "",
				equip_lists: [0],
				rolelist: [],
				detailtext:{
					title:"四空之达摩鞋[10级]",
					wuxingtitle:"五行属性:",
					wuxing:"水",
					equiptype:"黄金装备",
					sx1:"闪避率: 160点",
					sx2:"耐久度 80/80",
					sx3:"等级需求: 120",
					menpai:"门派需求: 少林寺",
					ansx1:"增加生命: 120-200",
					ansx2:"增加外功攻速: 20-40",
					ansx3:"吸内力: 4%-8%",
					ansx4:"[如来千叶]: 1-3级",
					ansx5:"[无相斩]: 1-3",
					ansx6:"增加火防: 25%-30%",
					},
				list: [
					[
						[3, 1, 4, 3],
						[2, 0, 4],
						[0, 2, 1]
					],
					[
						[0, 4, 2, 0],
						[3, 1, 2],
						[1, 3, 4]
					],
					[
						[4, 3, 0, 4],
						[1, 2, 0],
						[2, 1, 1]
					],
					[
						[2, 0, 1, 2],
						[4, 3, 1],
						[3, 4, 0]
					],
					[
						[1, 2, 3, 1],
						[0, 4, 3],
						[4, 0, 2]
					]
				],
				typeColors: [{
						color: "background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						text: "金",
						textColor: "color: #8D8C0F;"
					},
					{
						color: "background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						text: "木",
						textColor: "color: #0E8345;"
					},
					{
						color: "background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						text: "水",
						textColor: "color: #1C3FA4;"
					},
					{
						color: "background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						text: "火",
						textColor: "color: #9F4616;"
					},
					{
						color: "background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						text: "土",
						textColor: "color: #A95D30;"
					}
				],
				boxCol1: [{
						style: "width: 96rpx;height: 168rpx;margin-top: 200rpx;",
						imagestyle: "width: 96rpx;height: 168rpx; ",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						imagestyle: "width: 90rpx;height: 90rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;"
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						imagestyle: "width: 90rpx;height: 90rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;"
					},
					{
						style: "width: 96rpx;height: 168rpx;margin-top: 40rpx;",
						imagestyle: "width: 96rpx;height: 168rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
				],
				boxCol2: [{
						style: "width: 168rpx;height: 168rpx;margin-top: 80rpx;",
						imagestyle: "width: 168rpx;height: 168rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;",
						imagestyle: "width: 168rpx;height: 236rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;"
					},
					{
						style: "width: 168rpx;height: 84rpx;margin-top: 40rpx;",
						imagestyle: "width: 168rpx;height: 70rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;"
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						imagestyle: "width: 168rpx;height: 240rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;"
					},
				],
				boxCol3: [{
						style: "width: 168rpx;height: 84rpx;margin-top: 200rpx;",
						imagestyle: "width: 168rpx;height: 84rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;"
					},
					{
						style: "width: 168rpx;height: 324rpx;margin-top: 40rpx;",
						imagestyle: "width:168rpx;height:324rpx",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:324rpx;"
					},
					{
						style: "width: 168rpx;height: 168rpx;margin-top: 40rpx;",
						imagestyle: "width: 168rpx;height: 168rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					}
				],
				types: [{
						color: "background: #F07821;",
						text: "金",
						textColor: "color: #F07821;"
					},
					{
						color: "background: #0FDD70;",
						text: "木",
						textColor: "color: #0FDD70;",
					},
					{
						color: "background: #4E7CFF;",
						text: "水",
						textColor: "color: #4E7CFF;"
					},
					{
						color: "background: #FF5A00;",
						text: "火",
						textColor: "color: #FF5A00;"
					},
					{
						color: "background: #FECFB3;",
						text: "土",
						textColor: "color: #FECFB3"
					}
				],
				//info: "活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。"
			}
		},
		onLoad(options) {			
			if (options.mainId) this.mainId = options.mainId
			if (options.branchId) this.branchId = options.branchId
			
			wx.setNavigationBarTitle({
			   title: this.name
			})
			
			switch (options.choose_type) {
				case "0":
				case "1": {
					this.type = 0
					break;
				}
				case "2":
				case "3": {
					this.type = 1
					break;
				}
				case "4":
				case "5": {
					this.type = 2
					break;
				}
				case "6":
				case "7": {
					this.type = 3
					break;
				}
				case "8":
				case "9": {
					this.type = 4
					break;
				}
			}
			this.choose_type = options.choose_type,
			this.selectTypeIndex = options.selectTypeIndex,
			this.rolelist = this.$Global.JobType,
			this.bgimage = options.name ? "https://jianxia.mazhoudao.com/h5/static/home/menpai/" + options.name + ".png" : "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png"
			this.icon_wuxing = this.$Global.WuXing_Res[this.rolelist[this.choose_type].WX_type].res
		},
		computed: {
			currentElement: {
				get() {
					return this.mainId !== undefined ? groups[this.mainId].element : 'gold';
				}
			},
			name: {
				get() {
					console.log(this.mainId)
					return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].full_name : '天王·刀天王';
				},
				set(newVal) {
					
				}
			},
			info: {
				get() {
					return this.mainId !== undefined ? groups[this.mainId]['list'][this.branchId].desc : '活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。';
				},
				set(newVal) {
					
				}
			}
		},
		methods: {
			// 点击装备选项框
			open(col, witch, hang) {
				let lies = 0
				this.typewuxing = -1
				if (col == 1) {
					hang = hang + 5
				} else if (col == 2) {
					hang = hang + 8
				}
				else if (col == 0) {
					hang = hang + 1
				}
				let foritemname = hang + ".png"
				for (let key in this.equip_lists) {
					let value = this.equip_lists[key].res
					let index = value.lastIndexOf("/")
					
					// console.log('tup',value.lastIndexOf("/"))
					value = value.substring(index + 1, value.length)
					 // debugger
					if (foritemname == value) {
						this.typewuxing = this.equip_lists[key].type
						this.shuxingcolor = this.typeColors[this.typewuxing].textColor
						
						let item = this.equip_lists[key].detailtext;
						
						item.equiptype = item.equiptype || '';
						this.detailtext = item;
					}
				}
				// debugger
				if (this.typewuxing== -1) {

				} else {
		
					this.selectIndex = hang
					this.selectCol = col
					this.selectType = witch
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					this.$refs.popup.open("top")
				}
				// debugger
			},
			close() {
				this.$refs.popup.close()
			},
			goto() {
				var that = this;
				var i = 0;
				try {
					that.list.forEach(function(item, index) {
						if (item[that.selectCol][that.selectIndex] === that.selectType) {
							throw new Error("find");
						}
						i = i + 1;
					});
				} catch (e) {
					if (e.message != "find") throw e;
				}
				that.type = i;
				this.$refs.popup.close()
			},
			selectTypeF(index) {
				this.selectType = index
			},
			//点击帮派跳出属性判断
			GetMLtype() {
				let wuxingtext = ""
				switch (this.type) {
					case 0: {
						wuxingtext = "jin";
						break;
					}
					case 1: {
						wuxingtext = "mu";
						break;
					}
					case 2: {
						wuxingtext = "shui";
						break;
					}
					case 3: {
						wuxingtext = "huo";
						break;
					}
					case 4: {
						wuxingtext = "tu";
						break;
					}
				}
				let zhiye = ""
				let liupai = ""
				switch (this.choose_type) {
					case "0": {
						zhiye = "tianwang";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "chui"
								break;
							}
							case "1": {
								liupai = "dao"
								break;
							}
							case "2": {
								liupai = "qiang"
								break;
							}
						}
						break;
					}
					case "1": {
						zhiye = "shaolin";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "dao"
								break;
							}
							case "1": {
								liupai = "gun"
								break;
							}
							case "2": {
								liupai = "quan"
								break;
							}
						}
						break;
					}
					case "2": {
						zhiye = "tangmeng";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "feibiao"
								break;
							}
							case "1": {
								liupai = "feidao"
								break;
							}
							case "2": {
								liupai = "nujian"
								break;
							}
							case "3": {
								liupai = "xianjing"
								break;
							}
						}
						break;
					}
					case "3": {
						zhiye = "wudu";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "dao"
								break;
							}
							case "1": {
								liupai = "zhang"
								break;
							}
							case "2": {
								liupai = "zuzhou"
								break;
							}
						}

						break;
					}
					case "4": {
						zhiye = "emei";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "jian"
								break;
							}
							case "1": {
								liupai = "qi"
								break;
							}
							case "2": {
								liupai = "fuzhu"
								break;
							}
						}
						break;
					}
					case "5": {
						zhiye = "cuiyan";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "dandao"
								break;
							}
							case "1": {
								liupai = "shuangdao"
								break;
							}
						}
						break;
					}
					case "6": {
						zhiye = "gaibang";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "gun"
								break;
							}
							case "1": {
								liupai = "zhang"
								break;
							}
						}
						break;
					}
					case "7": {
						zhiye = "tianren";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "dao"
								break;
							}
							case "1": {
								liupai = "qiang"
								break;
							}
							case "2": {
								liupai = "zuzhou"
								break;
							}
						}
						break;
					}
					case "8": {
						zhiye = "wudang";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "jian"
								break;
							}
							case "1": {
								liupai = "qi"
								break;
							}
						}
						break;
					}
					case "9": {
						zhiye = "kunlun";
						switch (this.selectTypeIndex) {
							case "0": {
								liupai = "dao"
								break;
							}
							case "1": {
								liupai = "jian"
								break;
							}
							case "2": {
								liupai = "zuzhou"
								break;
							}
						}
						break;
					}
				}
				let resname = wuxingtext + "_" + zhiye + "_" + liupai
				return resname
			},
			//图片地址属性
			GetEquipIcon(lie, hang) {
				// console.log('fff',lie,hang)
				let lies = 0
				let src = ""
				if (lie == 1) {
					hang = hang + 5
				} else if (lie == 2) {
					hang = hang + 8
				} else if (lie == 0) {
					hang = hang + 1
				}
				let name = this.GetMLtype()
				let demolist = this.$Global.Gold_equip_list[name]
				// console.log('对应属性对象的名字',name)//帮派名字
				// console.log('对应属性对象',this.$Global.Gold_equip_list[name])//属性对象含图
				this.equip_lists = demolist //对应点击的装备属性
				let foritemname = hang + ".png"
				//循环图片地址
				for (let key in demolist) {
					let value = demolist[key].res
					let index = value.lastIndexOf("/")
					value = value.substring(index + 1, value.length)
					if (foritemname == value) {
						src = demolist[key].res
					}
				}

				return src
			}
		}
	}
</script>

<style>
	page {
		background-color: #1F282C;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
	}

	.bottom {
		width: 100%;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
	}

	.meng {
		margin-top: 155rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.head1 {
		/* 		display: flex; */
		float: left;
		z-index: 1;
		width: 100%;
		height: 326rpx;
		margin-top: -200rpx;
		background-color: #1F282C;
	}

	.bg-set1 {
		/* position: fixed; */
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.meng1 {
		/* position: fixed; */
		/* margin-top: 68rpx; */
		margin-top: -178rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}


	.top {
		left: ;
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		height: 200rpx;
		margin-top: -50rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 76rpx;
		width: 50rpx;
		border-top-left-radius: 20rpx;
	}

	.info .info-left {
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.box {
		height: 50rpx;
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		margin-top: 20rpx;
	}

	.box-box {
		width: 100%;
		text-align: center;
	}

	.box-row {
		width: 100%;
		height: 100%;
		float: left;
	}

	.uni-row {
		width: 100%;
	}

	.box .uni-row .types {
		height: 100%;
		min-width: 100rpx;
	}

	.dian {
		width: 14rpx;
		height: 14rpx;
		margin-top: 17rpx;
		border-radius: 50%;
		float: left;
	}



	.box-row-text {
		margin-left: 10rpx;
	}

	.box-box1 {
		margin-left: 0rpx;
	}

	.box-box-box {
		margin-left: 70rpx;
	}

	.box-box-box1 {
		margin-left: 20rpx;
	}

	.box-box-box2 {
		margin-left: 20rpx;
	}

	.box-box-box-box {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.box-box-box-box:after {
		border-radius: 6rpx;
	}

	/* 弹出层 */
	.pop-view {
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 700rpx;
		border-radius: 10rpx;
		margin-top: 345rpx;
	}

	.pop_background {
		width: 100%;
		height: 100%;
		background-color: #141519;
		opacity: 0.9;
		border-style:solid; 
		border-width:1px; 
		border-color:#F1EF41;
	}

	.pop-view .pop-line {
		width: 100%;
		height: 1px;
		background-color: #141519;
		margin-top: 40rpx;
	}

	.pop-view .pop-title {
		text-align: center;
		margin-top: 440rpx;
		padding-top: 40rpx;
		padding-right: 10rpx;
	}

	.pop-view .pop-title .title-text {
		font-size: 36rpx;
		color: #2FABD7;
	}

	.pop-view .pop-title .line-image {
		height: 24rpx;
		width: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.pop-view .pop-title-close .close-btn {
		width: 29rpx;
		height: 29rpx;
		float: right;
		margin-top: 32rpx;
		margin-right: 20rpx;
	}

	.pop-view .btn {
		width: 226rpx;
		height: 80rpx;
		background-color: #57BEF2;
		border-width: 0px;
		color: #FFFFFF;
		line-height: 40px;
	}

	.pop-view .pop-chose {
		width: 100%;
		height: 250rpx;
/* 		margin-left: 30rpx;
		margin-right: 30rpx; */
		/* background-color: #0000FF; */
	}

	.pop-chose {
/* 		margin-left: 50rpx;
		margin-right: 50rpx; */
		float: left;
		text-align:center;
	}
	.pop-chose-c {
		float: left;
	}
	
	.detailtitle {
		float: left;
		font-size: 32rpx;
		text-align: center;
		line-height: 64rpx;
		color: #F1EF41;
		width: 100%;
/* 		background-color: #0000FF; */
	}
	
	.wuxingtitle {
		float: left;
		font-size: 26rpx;
		text-align: right;
		line-height: 30rpx;
		color: #ffffff;
		width: 55%;
	}
	
	.wuxingtext {
		float: left;
		font-size: 26rpx;
		text-align: left;
		line-height: 30rpx;
		width: 35%;
		margin-left:20rpx ;
	}
	.equiptype {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffffff;
	}
	
	.sx1 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffffff;
	}
	.sx2 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffffff;
	}
	.sx3 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		width: 100%;
		line-height: 50rpx;
		color: #ffffff;
	}
	.sx4 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		width: 100%;
		line-height: 50rpx;
		color: #ffffff;
	}
	.menpai {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ff0000; 
	}
	.ansx1 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffff00;
	}
	.ansx2 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		width: 100%;
		line-height: 50rpx;
		color: #ffff00;
	}
	.ansx3 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffff00;
	}
	.ansx4 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffff00;
	}
	.ansx5 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		width: 100%;
		line-height: 50rpx;
		color: #ffff00;
	}
	.ansx6 {
		float: left;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		width: 100%;
		color: #ffff00;
	}
	
	@keyframes rotate {
		100% {
			transform: rotate(1turn);
		}
	}
	
	.flash-box {
		overflow: hidden;
		border-radius: 6rpx;
	}
	
	.flash {
		position: relative;
		z-index: 0;
	}
		
	.flash:before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -100%;
		top: -100%;
		width: 300%;
		height: 300%;
		background-color: rgba(240, 238, 68, 0.000);
		background-repeat: no-repeat;
		background-position: 0 0;
		background-image: conic-gradient(transparent, rgba(240, 238, 68, 1.000), transparent 20%);
		animation: rotate 4s linear infinite;
	}

	.flash::after {
		content: '';
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #45494f;
	}
</style>
